<template>
  <div class="page">
    <div class="main">
      <el-card class="box-card" style="height:800px">
        <div slot="header" class="clearfix">
          <span>
            <navigation />
          </span>
        </div>
        <div class="list" id="taskScore">
          <el-scrollbar class="page-component__scroll" style="height:100%">
            <div style="height:700px;">
              <el-table
                :header-cell-style="{ background: '#f5f5f5' }"
                border
                :data="tableData"
                style="width: 100%"
                height="680px"
                size="small"
              >
                <el-table-column
                  align="center"
                  width="160"
                  prop="subtasksName"
                  label="指标任务名称"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="160"
                  prop="departmentName"
                  label="配合责任单位"
                >
                </el-table-column>
                <el-table-column align="center" label="一季度">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="oneQuarterNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="oneQuarterDegree"
                    label="实际完成量"
                  ></el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree1)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree1)
                    }}</template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="二季度">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="twoQuarterNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="twoQuarterDegree"
                    label="实际完成量"
                  ></el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree2)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree2)
                    }}</template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="三季度">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="threeQuarterNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="threeQuarterDegree"
                    label="进度"
                  ></el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree3)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree3)
                    }}</template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="全年">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="allNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="allDegree"
                    label="实际完成量"
                  >
                  </el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree4)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree4)
                    }}</template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button
                      type="success"
                      size="mini"
                      @click="addTask(scope.row)"
                      >进度填报</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
        </div>
      </el-card>
    </div>

    <el-dialog
      title="进度填报"
      center
      :visible.sync="dialogschedule"
      width="30%"
    >
      <div>
        <el-form ref="form" :model="form" label-width="130px">
          <el-form-item label="任务名称">
            <el-input type="text" v-model="form.taskName"></el-input>
          </el-form-item>
          <el-form-item label="配合单位">
            <el-input type="text" v-model="form.unitName"></el-input>
          </el-form-item>
          <el-form-item label="季度" prop="quarter">
            <el-select
              class="userIntSize"
              style="width:100%"
              @change="backLoop()"
              v-model="form.quarter"
              clearable
            >
              <el-option
                v-for="(item, index) in quarterList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="实际任务完成量">
            <el-input type="text" v-model="form.QuarterDegree"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogschedule = false">取 消</el-button>
        <el-button type="primary" @click="dataGrade()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import configJson from "../../../api/config";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogGrade: false,
      dialogschedule: false,
      options: [],
      value: "",
      value1: true,
      input: "",
      tableData: [],
      total: 0,
      multipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      departmentName: "",
      textarea: "",
      form: {
        id: "",
        taskName: "", //任务名称
        unitName: "", //配合单位
        quarter: "",
        QuarterDegree: "", //实际完成量

        completionDegree: "",
        oneQuarterDegree: "",
        oneQuarterDegreeDescription: "",
        twoQuarterDegree: "",
        twoQuarterDegreeDescription: "",
        threeQuarterDegree: "",
        threeQuarterDegreeDescription: "",
        allDegree: "",
        allDegreeDescription: ""
      },
      objCurr: {
        type: true,
        id: "",
        subtasksId: "",
        taskId: "",
        year: "",
        time: "",
        score: ""
      },
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "全年" }
      ],
      input2: "",
      subtasksId: "",
      uploadUrl: configJson.API_URL + "fileController/uploadFile", //地址
      fileList: []
    };
  },
  mounted() {
    this.subtasksId = this.$route.query.id;
    // this.departmentName= this.$route.query.departmentName;
    this.getListByPage();
  },
  // 计算属性
  computed: {
    a1() {
      if (this.objCurr.type == true) {
        this.quarterList = [1, 2, 3, 4];
      } else {
        this.quarterList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      }
      return this.quarterList;
    }
  },
  methods: {
    // 百分号
    decimal(val) {
      console.log(val);
      if (val) {
        let _val = val * 100;
        _val = _val.toFixed(2);
        return _val + "%";
      }
    },
    //选择附件
    successFile(response, file, fileList) {
      if (response.code == 200) {
        let fileUrlStr = this.uploadUrl.split("/");
        let fileRemoveChl = fileUrlStr.slice(0, fileUrlStr.length - 1);
        this.fileUrlEnd = fileRemoveChl.join("/");
        this.fileName = this.fileUrlEnd + "/" + response.data;
      }
    },
    handleDealFileRemove(file, fileList) {
      this.fileName = "";
    },
    uploadExceed(files, fileList) {
      this.$set(fileList[0], "raw", files[0]);
      this.$set(fileList[0], "name", files[0].name);
      this.$refs["rebateUpload"].clearFiles(); //清除文件
      this.$refs["rebateUpload"].handleStart(files[0]); //选择文件后的赋值方法
      this.fileName = this.fileUrlEnd + "/" + files[0].name;
    },
    // 删除
    deleteRow(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(`/subtaskDegree/remove`, {
              id: val.id
            })
            .then(res => {
              if (res.code == 200) {
                console.log(res);
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });
                this.getListByPage();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //任务回填
    backLoop() {
      this.$axios
        .post(`/deptTask/load`, { id: this.form.id }, 2)
        .then(res => {
          if (res.code == 200) {
            let _data = res.data;
            let _this = this.form;
            switch (_this.quarter) {
              case 1:
                _this.QuarterDegree = _data.oneQuarterDegree;
                break;
              case 2:
                _this.QuarterDegree = _data.twoQuarterDegree;
                break;
              case 3:
                _this.QuarterDegree = _data.threeQuarterDegree;
                break;
              default:
                _this.QuarterDegree = _data.allDegree;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 填报
    addTask(val) {
 
      this.form.id = val.id;
      this.form.subtasksId = val.subtasksId;
      this.dialogschedule = true;
      let _this = this.form;
      _this.taskName = val.subtasksName;
      _this.unitName = val.departmentName;
      _this.quarter = "";
      _this.QuarterDegree = "";

      // this.form.id = val.id;
      // this.$axios
      //   .post(`/deptTask/load`, { id: val.id }, 2)
      //   .then(res => {
      //     if (res.code == 200) {
      //       console.log(res);
      //       let _data = res.data; 
      //       let _this = this.form;
      //       _this.oneQuarterDegree = _data.oneQuarterDegree;
      //       _this.oneQuarterDegreeDescription =
      //         _data.oneQuarterDegreeDescription;
      //       _this.twoQuarterDegree = _data.twoQuarterDegree;
      //       _this.twoQuarterDegreeDescription =
      //         _data.twoQuarterDegreeDescription;
      //       _this.threeQuarterDegree = _data.threeQuarterDegree;
      //       _this.threeQuarterDegreeDescription =
      //         _data.threeQuarterDegreeDescription;
      //       _this.allDegree = _data.allDegree;
      //       _this.allDegreeDescription = _data.allDegreeDescription;
      //       this.dialogschedule = true;
      //     }
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    // 列表查看
    pathCheck(val) {
      //  this.$router.push({
      //   path: "/cooperateList",
      //   query: { parentId: this.taskId, id: val.id }
      // });
    },
    setCheck(val) {
      this.$router.push({
        path: "/cooperateList",
        query: { parentId: this.taskId, id: val.id }
      });
    },
    setGrade(val) {
      console.log(val);
      for (const key in this.objCurr) {
        this.objCurr[key] = "";
      }
      this.objCurr.taskId = val.id;
      this.objCurr.type = true;
      this.dialogGrade = true;
    },
    // 点击弹出框列表确认按钮
    dataGrade() {
      let _this = this.form;
      // if (_this.completionDegree == "") {
      //   this.$message.error("请用户填填完输入框");
      //   return;
      // }
      if (isNaN(_this.QuarterDegree)) {
        this.$message.error("请用户输入数字");
        return;
      }

      switch (_this.quarter) {
        case 1:
          _this.oneQuarterDegree = _this.QuarterDegree;
          break;
        case 2:
          _this.twoQuarterDegree = _this.QuarterDegree;
          break;
        case 3:
          _this.threeQuarterDegree = _this.QuarterDegree;
          break;
        default:
          _this.allDegree = _this.QuarterDegree;
      }
      // if (!/(^[1-9]\d*$)/.test(_this.completionDegree)) {
      //   this.$message.error("请用户在分数内写入1-100的正整数");
      //   return;
      // }
      // this.form.id = this.form.subtasksId;
      // this.form.subtasksId = "";
      this.$axios
        .post(`/deptTask/update`, this.form,2)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.dialogschedule = false;
            this.getListByPage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    dataTotal(val) {
      this.pageNum = val;
    },
    // 表格数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 列表查看按钮
    routerPath(val) {
      this.$router.go(-1);
    },
    // 编写备注
    dataRemark() {
      this.dialogVisible = true;
    },
    // 获取数据列表
    getListByPage() {
      console.log(this.subtasksId);
      let _obj = {
        subtasksId: +this.subtasksId
      };
      this.$axios
        .post(`/deptTask/getList`, _obj, 2)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;
            // this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main {
  width: 100%;
  height: 100%;
}
.subnav {
  float: left;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.searchLeft {
  float: left;
  width: 400px;
  /* height: 40px; */
}
.searchLeft > button {
  width: 100px;
  height: 40px;
  background: #409eff;
  color: #fff;
  border: 0px;
  font-size: 16px;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
  left: -8px;
  top: 1px;
}
.searchRight {
  float: left;
  width: auto;
}
.striping > b {
  font-weight: 500;
  font-size: 14px;
}
.searchRight > span {
  display: inline-block;
  width: 80px;
  height: auto;
  font-size: 14px;
  text-align: center;
  margin-left: 20px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.page-component__scroll {
  height: 100%;
}
.list {
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}
.laypage {
  width: 100%;
  height: 60px;
  position: relative;
  top: -60px;
  text-align: right;
}
</style>
<style>
#taskScore .el-scrollbar__wrap {
  overflow: visible;
  overflow-y: scroll;
}
</style>
